<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>个人中心</title>
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头像 -->
    <div class="top">
        <img class="head_img" src="./images/head_pic.jpg" alt="">
        <p class="nickname">昵称</p>
    </div>
    <!-- 头像 -->
    <!-- 我的订单 -->
    <div class="order">
        <p class="order_title">我的订单</p>
        <table class="order_list">
            <tr>
                <th style="width: 15%"></th>
                <th>活动信息</th>
                <th>核销二维码</th>
            </tr>
            <tr>
                <td>1</td>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td class="show_code">核销二维码</td>
            </tr>
            <tr>
                <td>2</td>
                <td><a href="">活动信息</a></td>
                <td class="show_code">核销二维码</td>
            </tr>
        </table>
    </div>
    <!-- 我的订单 -->
    <!-- 分享记录 -->
    <div class="share">
        <p class="share_title">分享记录</p>
        <table class="share_list">
            <tr>
                <th>活动信息</th>
                <th>分享次数</th>
                <th>参与者</th>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>1</td>
                <td><img src="images/head_pic.jpg" alt=""></td>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>1</td>
                <td><img src="images/head_pic.jpg" alt=""></td>
            </tr>
        </table>
    </div>
    <!-- 分享记录 -->
    <!-- 红包记录 -->
    <div class="package">
        <p class="package_title">红包记录</p>
        <table class="package_list">
            <tr>
                <th>活动信息</th>
                <th>红包类型</th>
                <th>红包金额</th>
                <th>获取时间</th>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>推荐返利</td>
                <td>1元</td>
                <td style="font-size: 12px">11.30 11:30</td>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>分享返利</td>
                <td>1元</td>
                <td style="font-size: 12px">11.30 11:30</td>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>推荐返利</td>
                <td>1元</td>
                <td style="font-size: 12px">11.30 11:30</td>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>分享返利</td>
                <td>1元</td>
                <td style="font-size: 12px">11.30 11:30</td>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>推荐返利</td>
                <td>1元</td>
                <td style="font-size: 12px">11.30 11:30</td>
            </tr>
            <tr>
                <td class="activity_infor"><a href="">活动信息活动信息活动信息</a></td>
                <td>分享返利</td>
                <td>1元</td>
                <td style="font-size: 12px">11.30 11:30</td>
            </tr>
        </table>
    </div>
    <!-- 红包记录 -->
    <!-- 二维码弹窗 -->
    <div class="code_bg">
        <div class="code">
            <img src="images/code.png" class="code_img">
            <button class="close_code">关闭</button>
        </div>
    </div>
    <!-- 二维码弹窗 -->
    <script src="./js/require.min.js"></script>
    <script>
        require.config({
            baseUrl: './js',
            paths: {
                'jquery': 'jquery.min'
            }
        });
        require(['jquery'], function($) {
            $('.show_code').on('click', function() {
                $('.code_bg').show();
            });
            $('.close_code').on('click', function() {
                $('.code_bg').hide();
                event.stopPropagation();
            });
            $('.code').on('click', function() {
                $('.code_bg').show();
                event.stopPropagation();
            })
            $('.code_bg').on('click', function() {
                $(this).hide();
            })
        })
    </script>
</body>
</html>